<template>
  <div id="appList">
    <div>
      <el-form class="pageQuery" label-position="top" >
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-card>
      <div>
        <el-button type="success" @click="add_box.show = true" v-if="$api.buttonPower(87)">添加应用</el-button>
      </div>
      <el-table :data="listData" v-loading="loading">
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label"
          :prop="tableItem.prop">
          <template slot-scope="scope">
            <div v-html="$api.status.status(scope.row.status, option[$api.Enum.DicTypeStatus])"
              v-if="tableItem.prop == 'status'"></div>
            <div v-else>{{ scope.row[tableItem.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button type="text" v-if="$api.buttonPower(88)" @click="detailButton(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
    </el-card>

    <el-drawer title="应用详情" :visible.sync="detail_box.show" size="50%">
      <app-detail :data_id="detail_box.id" @editSubmit="editSubmit"></app-detail>
    </el-drawer>
    <el-drawer title="应用添加" :visible.sync="add_box.show" direction="rtl" size="85%" :wrapperClosable="false" :before-close="setClose" append-to-body>
      <iot-app-set v-if="add_box.show" @close="setClose"></iot-app-set>
    </el-drawer>
  </div>
</template>

<script>
import appDetail from './appDetail.vue';
export default {
  components: { appDetail },
  data() {
    return {
      queryInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      listData: [],

      option: [],
      queryItem: [],
      tableItem: [
        {
          label: '应用id',
          prop: 'id'
        },
        {
          label: '应用名称',
          prop: 'name'
        },
        {
          label: '应用类型',
          prop: 'app_type_name'
        },
        {
          label: '状态',
          prop: 'status'
        },
      ],
      detail_box:{
        show: false,
        id: 0,
      },
      add_box:{
        show: false,
      },
      loading: false,
    };
  },
  methods: {
    getListData() {
      this.loading = true
      this.$api.merchant.applist(this.queryInfo, res => {
        if (res.status) {
          this.listData = res.data.list
          this.queryInfo.total = res.data.page.total
          this.loading = false
        } else {
          this.$message.error(res.message)
        }

      })
    },
    detailButton(row) {
      this.detail_box.show = true
      this.detail_box.id = row.id
    },
    editSubmit() {
      this.drawer = false
      this.getListData()
    },
    setClose(){
      this.add_box.show = false
      this.getListData()
    },

  },
  mounted() {
    this.getListData()
    this.$api.foundation.dicListExtendCache([this.$api.Enum.DicTypeStatus], '', res => {
      this.option = res
    })
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  }
};
</script>

<style lang="less" scoped></style>
<style lang="less">
#appList {
  .label {
    width: 100px;
    display: inline-block;
    text-align: end;
    font-weight: 700;
  }

  .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
  }
}
</style>